import { defineComponent, PropType, provide } from 'vue'
import { AntFormRules, FormContext, FormItemContext, FormKey } from './type'
import './index.scss';
// import { useExpose } from '@/uses';
import { ErrorList } from 'async-validator'
export default defineComponent({
  name: 'AForm',
  props: {
    model: {
      type: Object,
      required: true
    },
    rules: Object as PropType<AntFormRules>
  },
  emits: ['validate'],
  setup(props, { emit, slots, expose }) {
    
    const fromItems: FormItemContext[] = [];
    const addItem = (item: FormItemContext) => {
      fromItems.push(item);
    }
    const removeItem = (id: string) => {
      if (fromItems.length) {
        const index = fromItems.findIndex(item => item.id === id);
        if (index > -1) {
          fromItems.splice(index, 1);
        }
      }
    }
    provide<Partial<FormContext>>(FormKey, {
      model: props.model,
      rules: props.rules,
      addItem,
      removeItem
    });
    const validate = (callback?: (valid: boolean) => void): Promise <boolean | ErrorList> => {
      return Promise.all(
        fromItems
        .filter(item => item.prop)
        .map(item => item.validate(props.model[item.prop]))
      ).then(() => {
        if (callback) {
          callback(true)
        }
        emit('validate', true);
        return Promise.resolve(true)
      }).catch(errors => {
        if (callback) {
          callback(errors)
        }
        emit('validate', errors);
        return Promise.reject(errors)
      });
    };
    
    // useExpose<{validate: validateFunc}>({validate});
    expose({
      validate
    })
    const onSubmit = (event: Event) => {
      event.preventDefault();
      validate()
    }
    return () => {
      return (
        <form class="ant-form" onSubmit={ onSubmit }>
          { slots.default!() }
        </form>
      )
    }
  }
})